<template>
	<div id="analysis">
		<el-row>
			<el-col :span='12' style='padding-right: 15px;'>
				<div class='white_bg radius_5px'>
					<h4>薪资概览</h4>
					<ve-line :data="chartData1"></ve-line>
				</div>
			</el-col>
			<el-col :span='12'>
				<div class='white_bg radius_5px'>
					<h4>资产采购</h4>
					<ve-bar :data="chartData2" :settings="chartSettings2"></ve-bar>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span='12' style='padding-right: 15px;'>
				<div class='white_bg radius_5px'>
					<h4>学历分布</h4>
					<ve-pie :data="chartData3"></ve-pie>
				</div>
			</el-col>
			<el-col :span='12'>
				<div class='white_bg radius_5px'>
					<h4>年龄分布</h4>
					<ve-histogram :data="chartData4"></ve-histogram>
				</div>
			</el-col>
		</el-row>
		<div class="footer"></div>
	</div>
</template>

<script>
	import '../css/analysis.css';

	export default {
		data: function() {
			this.chartSettings2 = {
				stack: {
					'xxx': ['电脑', '办公桌', '显示器']
				}
			}
			return {
				chartData1: {
					columns: ['年份', '薪资'],
					rows: [{
							'年份': '2012',
							'薪资': '3'
						},
						{
							'年份': '2013',
							'薪资': '4'
						},
						{
							'年份': '2014',
							'薪资': '3.5'
						},
						{
							'年份': '2015',
							'薪资': '5'
						},
						{
							'年份': '2016',
							'薪资': '4.8'
						},
						{
							'年份': '2017',
							'薪资': '6'
						},
						{
							'年份': '2018',
							'薪资': '7'
						},
						{
							'年份': '2019',
							'薪资': '9'
						},
						{
							'年份': '2020',
							'薪资': '13'
						}
					]
				},
				chartData2: {
					columns: ['设备', '电脑', '办公桌', '显示器'],
					rows: [{
							'设备': 'WY',
							'电脑': 25635,
							'办公桌': 1890,
							'显示器': 9314
						},
						{
							'设备': 'DC',
							'电脑': 30352,
							'办公桌': 20439,
							'显示器': 10225
						},
						{
							'设备': 'VT',
							'电脑': 38253,
							'办公桌': 42538,
							'显示器': 15757
						},
						{
							'设备': 'ND',
							'电脑': 51896,
							'办公桌': 67358,
							'显示器': 18794
						},
						{
							'设备': 'AK',
							'电脑': 72083,
							'办公桌': 85640,
							'显示器': 22153
						},
					]
				},
				chartData3: {
					columns: ['学历', '数量'],
					rows: [{
							'学历': '高中',
							'数量': 40
						},
						{
							'学历': '大专',
							'数量': 21
						},
						{
							'学历': '本科',
							'数量': 17
						},
						{
							'学历': '硕士',
							'数量': 13
						},
						{
							'学历': '博士',
							'数量': 9
						}
					]
				},
				chartData4: {
					columns: ['年龄', '数量'],
					rows: [{
							'年龄': '20-25',
							'数量': 90
						},
						{
							'年龄': '25-30',
							'数量': 20
						},
						{
							'年龄': '30-35',
							'数量': 10
						},
						{
							'年龄': '35-40',
							'数量': 15
						},
						{
							'年龄': '40-45',
							'数量': 18
						},
						{
							'年龄': '45-50',
							'数量': 35
						},
						{
							'年龄': '50-55',
							'数量': 40
						},
						{
							'年龄': '55-60',
							'数量': 40
						},
					]
				}
			}
		},
	}
</script>

<style>
</style>
